<template>
    <div class="article-page">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>面经后台</el-breadcrumb-item>
        <el-breadcrumb-item>面经管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card shadow="never" border="false">
        <template #header>
          <div class="header">
            <span>共{{pageTotal }}条记录</span>
            <el-button
              @click="openDrawer('add')"
              icon="el-icon-plus"
              size="small"
              type="primary"
              round>
              添加面经
            </el-button>
          </div>
        </template>


        <el-table :data="list" style="width: 100%">
            <el-table-column prop="stem" label="标题" width="400">
            </el-table-column>
            <el-table-column prop="creator" label="作者"> </el-table-column>
            <el-table-column prop="likeCount" label="点赞"> </el-table-column>
            <el-table-column prop="views" label="浏览数"> </el-table-column>
            <el-table-column prop="createdAt" label="更新时间" width="200">
            </el-table-column>
            <el-table-column label="操作" width="120px">
                <template #default="{ row }">
                  <div class="actions">
                    <i class="el-icon-view" @click="openDrawer('preview', row.id, )"></i>
                    <i class="el-icon-edit-outline" @click="openDrawer('edit', row.id)"></i>
                    <i class="el-icon-delete" @click="del(row.id)"></i>
                  </div>
                </template>
              </el-table-column>
          </el-table>
          <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="pageTotal"
        >
        </el-pagination>
      </el-card>
      <el-drawer
          :visible.sync="isShowDrawer"
          :before-close="handleClose"
          :title="drawerTitle"
          direction="rtl"
        >
        <div v-if="drawerType === 'preview'" class="article-preview">
          <h5>{{ form.stem }}</h5>
          <div v-html="form.content"></div>
        </div>
        <el-form v-else :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item label="标题" prop="stem">
                <el-input v-model="form.stem" placeholder="输入面经标题"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <quill-editor v-model="form.content" @blur="$refs.form.validateField('content')"></quill-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">确认</el-button>
                <el-button @click="handleClose">取消</el-button>
            </el-form-item>
        </el-form>
        </el-drawer>
    </div>
  </template>
  
  <script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor'
  import { getArticleList ,createArticle,removeArticle,getArticleDetail,updateArticle} from '@/api/article'
  export default {
      components: {
          quillEditor
      },
      name: 'article-page',
      data() {
          return {
              current: 1,
              pageSize: 10,
              total: 0,
              list: [],
              pageTotal: 0,
              isShowDrawer: false,
              drawerType: '',
              title:'',
              form: {
                  stem: '',
                  content: ''
              },
              rules: {
                  stem: [{ required: true, message: '请输入面经标题', trigger: 'blur' }],
                  content: [{ required: true, message: '请输入面经标题', trigger: 'blur' }]
              }
          }
      },
    created() {
          this.getDatas()
      },
      computed: {
          drawerTitle() {
              let title = '大标题'
              if (this.drawerType === 'add') title = '添加面经'
              if (this.drawerType === 'preview') title = '面经预览'
              if (this.drawerType === 'edit') title = '修改面经'
              return title
          }
      },
      methods: {
          async getDatas() {
              const res = await getArticleList({
                  current: this.current,
                  pageSize: this.pageSize
              })
              this.pageTotal = res.data.total
              this.list = res.data.rows

          },
          del(id) {
              console.log(id)
          },
          handleCurrentChange(val) {
              // 处理当前页变化
              this.current = val
              this.getDatas()
          },
          openDrawer(type, id) {
              // console.log(type, id)
              this.drawerType = type
              this.isShowDrawer = true
          },
          handleClose() {
              this.$refs.form.resetFields()
              this.isShowDrawer = false
          },
          async submit() {
              try {
                  // 校验 (对整个表单校验)
                  await this.$refs.form.validate()
                  // 请求
                  await createArticle(this.form)
                  // 提示
                  this.$message.success('添加成功')
                  // 重新渲染 将当前页重置到第一页
                  this.current = 1
                  this.getDatas()
                  // 关闭抽屉
                  this.handleClose()
              } catch (e) {
                  console.log(e)
              }
          },
          async del(id) {
              // 删除请求
              await removeArticle(id)
              // 添加成功的提示
              this.$message.success('删除成功')

              // 处理删除当前页的最后一条
              if (this.tableData.length === 1 && this.current > 1) {
                  this.current--
              }
              // 重新渲染
              this.getDatas()
          },
          async openDrawer(type, id) {
            // console.log(type, id)
            this.drawerType = type
            this.isShowDrawer = true

            if (type !== 'add') {
              const res = await getArticleDetail(id)
              this.form = {
                ...res.data
              }
            }
          },
          closeDrawer() {
            // 将form也手动重置
            this.form = {
              stem: '', // 标题
              content: '' // 内容
            }
            this.$refs.form.resetFields() // 重置表单 
            this.isShowDrawer = false // 关闭抽屉
      },
      async submit () {
        try {
          // 校验表单
          await this.$refs.form.validate()
          // 如何区分, 当前是 编辑 还是 添加
          if (this.drawerType === 'add') {
            // 发送请求
            await createArticle(this.form)
            // 添加提示 $message.success
            this.$message.success('添加成功')
          }
          if (this.drawerType === 'edit') {
            // 发送的是编辑的请求
            const { id, stem, content } = this.form
            await updateArticle({ id, stem, content })
            this.$message.success('修改成功')
          }
          // 无论是修改还是添加, 都会回到第一页, 重置页码
          this.current = 1
          // 重新渲染
          this.getDatas()
          // 关闭弹框
          this.handleClose()
        } catch (e) {
          console.log(e)
        }
      },
        handleClose() {
        this.form = { stem: '', content: '' }
        // 注意点: 由于公用的抽屉, 当预览时, 是没有表单的! 不能重置表单 
        if (this.drawerType !== 'preview') {
          // add edit 调用 resetFields 在此处的作用: 重置校验状态
          this.$refs.form.resetFields()
        }
        this.isShowDrawer = false // 关闭弹框
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-card {
    margin-top: 25px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 16px;
    }
    .actions {
      font-size: 18px;
      display: flex;
      justify-content: space-around;
      color: #666;
      > i:hover {
        color: rgba(114, 124, 245, 1);
        cursor: pointer;
      }
    }
  }
  .el-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .el-breadcrumb {
    margin-top: 10px;
  }
  .el-form {
    padding-right: 40px;
  }
  .quill-editor {
    ::v-deep .ql-editor {
      height: 300px;
    }
  }
  .el-rate {
    padding: 10px 0;
  }
  .article-preview {
    padding: 0 40px 40px 40px;
    > h5 {
      font-size: 20px;
      color: #666;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 30px;
      margin: 0 0 20px 0;
    }
  }
  </style>
  